import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:get/get_connect/http/src/utils/utils.dart';

import '../controllers/user_controller.dart';
import '../../../utils/screenAdapter.dart';

class UserView extends GetView<UserController> {
  const UserView({super.key});
  Widget _pageBody() {
    return Column(
      children: [
        _myAvatar(),
        _serviceItems(),
        _userBanner(),
        _aboutOrder(),
        _allService(),
      ],
    );
  }

  Widget _myAvatar() {
    return Container(
      padding: EdgeInsets.only(left: ScreenAdapter.width(10)),
      child: Row(
        children: [
          SizedBox(
            width: ScreenAdapter.width(150),
            height: ScreenAdapter.width(150),
            child: CircleAvatar(
              radius: ScreenAdapter.width(75),
              backgroundImage: AssetImage("assets/images/avatar.png"),
            ),
          ),
          SizedBox(width: ScreenAdapter.width(46)),
          InkWell(
            onTap: () {
              Get.toNamed("/code-login-step-one");
            },
            child: Obx(
              () => controller.isLogin.value
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(controller.userInfo.value.username ?? "未设置昵称"),
                        Text("普通会员"),
                      ],
                    )
                  : Text(
                      "登录/注册",
                      style: TextStyle(fontSize: ScreenAdapter.fontSize(46)),
                    ),
            ),
          ),
          SizedBox(width: ScreenAdapter.width(24)),
          Icon(
            Icons.arrow_forward_ios_rounded,
            size: ScreenAdapter.fontSize(34),
            color: Colors.black26,
          ),
        ],
      ),
    );
  }

  Widget _serviceItems() {
    return Obx(
      () => Container(
        padding: EdgeInsets.fromLTRB(
          ScreenAdapter.width(30),
          ScreenAdapter.height(70),
          ScreenAdapter.width(20),
          ScreenAdapter.height(30),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              children: [
                Text(
                  "${controller.userInfo.value.gold ?? "-"}",
                  style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(40),
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  "米金",
                  style: TextStyle(
                    color: Colors.black38,
                    fontSize: ScreenAdapter.fontSize(34),
                  ),
                ),
              ],
            ),
            Column(
              children: [
                Text(
                  "${controller.userInfo.value.coupon ?? "-"}",
                  style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(40),
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  "优惠券",
                  style: TextStyle(
                    color: Colors.black38,
                    fontSize: ScreenAdapter.fontSize(34),
                  ),
                ),
              ],
            ),
            Column(
              children: [
                Text(
                  "${controller.userInfo.value.redPacket ?? "-"}",
                  style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(40),
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  "红包",
                  style: TextStyle(
                    color: Colors.black38,
                    fontSize: ScreenAdapter.fontSize(34),
                  ),
                ),
              ],
            ),
            Column(
              children: [
                Text(
                  "${controller.userInfo.value.quota ?? "-"}",
                  style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(40),
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  "最高额度",
                  style: TextStyle(
                    color: Colors.black38,
                    fontSize: ScreenAdapter.fontSize(34),
                  ),
                ),
              ],
            ),
            Column(
              children: [
                Icon(
                  Icons.account_balance_wallet_outlined,
                  size: ScreenAdapter.fontSize(68),
                ),
                Text(
                  "钱包",
                  style: TextStyle(
                    color: Colors.black38,
                    fontSize: ScreenAdapter.fontSize(34),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _userBanner() {
    return Container(
      padding: EdgeInsets.only(top: ScreenAdapter.height(20)),
      decoration: BoxDecoration(
        color: Colors.orange,
        borderRadius: BorderRadius.circular(ScreenAdapter.radius(20)),
      ),
      child: Column(
        children: [
          Row(
            children: [
              SizedBox(width: ScreenAdapter.width(40)),
              Text(
                "新用户登录领取新人礼包，享更多福利",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: ScreenAdapter.fontSize(32),
                ),
              ),
            ],
          ),
          Container(
            padding: EdgeInsets.fromLTRB(
              ScreenAdapter.width(20),
              ScreenAdapter.height(30),
              ScreenAdapter.width(20),
              ScreenAdapter.height(30),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: ScreenAdapter.width(470),
                  padding: EdgeInsets.fromLTRB(
                    ScreenAdapter.width(30),
                    ScreenAdapter.height(40),
                    ScreenAdapter.width(20),
                    ScreenAdapter.height(40),
                  ),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(
                      ScreenAdapter.radius(20),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "米金星球",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(46),
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            "做任务得米金",
                            style: TextStyle(
                              color: Colors.orange,
                              fontSize: ScreenAdapter.fontSize(30),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        width: ScreenAdapter.width(160),
                        height: ScreenAdapter.height(150),
                        child: Image.asset(
                          "assets/images/user_left.png",
                          fit: BoxFit.contain,
                        ),
                      ),
                    ],
                  ),
                ),

                Container(
                  width: ScreenAdapter.width(470),
                  padding: EdgeInsets.fromLTRB(
                    ScreenAdapter.width(30),
                    ScreenAdapter.height(40),
                    ScreenAdapter.width(20),
                    ScreenAdapter.height(40),
                  ),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(
                      ScreenAdapter.radius(20),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "米金商城",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(46),
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            "买前先兑券",
                            style: TextStyle(
                              color: Colors.orange,
                              fontSize: ScreenAdapter.fontSize(30),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        width: ScreenAdapter.width(160),
                        height: ScreenAdapter.height(150),
                        child: Image.asset(
                          "assets/images/user_right.png",
                          fit: BoxFit.contain,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _aboutOrder() {
    return Container(
      margin: EdgeInsets.only(top: ScreenAdapter.height(30)),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(ScreenAdapter.radius(20)),
      ),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.only(
              bottom: ScreenAdapter.height(44),
              top: ScreenAdapter.height(44),
            ),
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Center(
                    child: Text("收藏", style: TextStyle(color: Colors.black38)),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      border: Border(
                        left: BorderSide(width: 1, color: Colors.black38),
                        right: BorderSide(width: 1, color: Colors.black38),
                      ),
                    ),
                    child: Text("足迹", style: TextStyle(color: Colors.black38)),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Center(
                    child: Text("关注", style: TextStyle(color: Colors.black38)),
                  ),
                ),
              ],
            ),
          ), // 收藏
          Padding(
            padding: EdgeInsets.only(
              left: ScreenAdapter.width(20),
              right: ScreenAdapter.width(20),
            ),
            child: Divider(
              height: ScreenAdapter.height(2),
              color: Colors.black12,
            ),
          ),
          // 第二行
          Container(
            padding: EdgeInsets.fromLTRB(
              ScreenAdapter.width(30),
              ScreenAdapter.height(80),
              ScreenAdapter.width(30),
              ScreenAdapter.height(66),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Icon(
                        Icons.account_balance_wallet_outlined,
                        size: ScreenAdapter.fontSize(66),
                      ),
                      SizedBox(height: ScreenAdapter.height(20)),
                      Text(
                        "待付款",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(28)),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      Icon(Icons.car_crash, size: ScreenAdapter.fontSize(66)),
                      SizedBox(height: ScreenAdapter.height(20)),
                      Text(
                        "待收货",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(28)),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      Icon(
                        Icons.question_answer_outlined,
                        size: ScreenAdapter.fontSize(66),
                      ),
                      SizedBox(height: ScreenAdapter.height(20)),
                      Text(
                        "待评价",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(28)),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      Icon(
                        Icons.design_services_outlined,
                        size: ScreenAdapter.fontSize(66),
                      ),
                      SizedBox(height: ScreenAdapter.height(20)),
                      Text(
                        "退换/售后",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(28)),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      Icon(
                        Icons.copy_all_rounded,
                        size: ScreenAdapter.fontSize(66),
                      ),
                      SizedBox(height: ScreenAdapter.height(20)),
                      Text(
                        "全部订单",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(28)),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _allService() {
    return Container(
      margin: EdgeInsets.only(
        top: ScreenAdapter.height(20),
        bottom: ScreenAdapter.height(20),
      ),
      padding: EdgeInsets.fromLTRB(
        ScreenAdapter.width(20),
        ScreenAdapter.height(30),
        ScreenAdapter.width(20),
        ScreenAdapter.height(30),
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(ScreenAdapter.radius(20)),
      ),
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.only(bottom: ScreenAdapter.height(14)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "服务",
                  style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(32),
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  "查看更多 >",
                  style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(26),
                    color: Colors.black38,
                  ),
                ),
              ],
            ),
          ), // 第一行
          // 第二行
          GridView.count(
            // GridView也是可以滑动的组件
            physics:
                NeverScrollableScrollPhysics(), // 禁止GridView在ListView中滑动, 否则在滚动过程中会卡顿
            shrinkWrap: true, // GridView结合ListView使用,要使用shrinkWrap: true,不然会报错
            crossAxisCount: 4, // 每行显示4个
            childAspectRatio: 1.25, // 每个子item宽高比
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [Icon(Icons.home), Text("一键安装")],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [Icon(Icons.home), Text("一键安装")],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [Icon(Icons.home), Text("一键安装")],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [Icon(Icons.home), Text("一键安装")],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [Icon(Icons.home), Text("一键安装")],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [Icon(Icons.home), Text("一键安装")],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [Icon(Icons.home), Text("一键安装")],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [Icon(Icons.home), Text("一键安装")],
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 测试退出登录
  Widget _loginOutButton() {
    return Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: InkWell(
        onTap: () {
          controller.logout();
        },
        child: Container(
          height: ScreenAdapter.height(150),
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(ScreenAdapter.radius(20)),
          ),
          child: Center(
            child: Text(
              "退出登录",
              style: TextStyle(
                fontSize: ScreenAdapter.fontSize(32),
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          SizedBox(
            width: ScreenAdapter.width(168),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "会员码",
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(26)),
                ),
                Icon(Icons.qr_code_outlined, size: ScreenAdapter.fontSize(56)),
              ],
            ),
          ),
          SizedBox(width: ScreenAdapter.width(44)),
          Icon(Icons.settings_outlined),
          SizedBox(width: ScreenAdapter.width(44)),
          Icon(Icons.message_outlined),
          SizedBox(width: ScreenAdapter.width(20)),
        ],
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.black.withAlpha(6),
            child: ListView(
              padding: EdgeInsets.fromLTRB(
                ScreenAdapter.width(30),
                ScreenAdapter.height(30),
                ScreenAdapter.width(30),
                ScreenAdapter.height(10),
              ),
              children: [_pageBody()],
            ),
          ),
          _loginOutButton(),
        ],
      ),
    );
  }
}
